Tengo una página HTML muy simple:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test 2 V2</title> </head> <body> <p> <label id="wordCat"></label> <input type="text" id="txtCat"> <input type="button" id="btnCat" value="Load Word" onclick="fetchData(document.getElementById('txtCat').value)"> </p> <p> <label>Your Guess Word is:</label> <label id="hiddenWord"></label> </p> <script src="scripts/app.js"></script> </body> </html>Al hacer clic en el botón, debe llamar a la función:
async function fetchData(req) { console.log(req.value) let response = await fetch(req); var selectBox, option, prop; selectBox = document.getElementById("drivers"); if (response.statusText == "OK") { return await response.json(); }else{ throw new Error(response.statusText); } } El problema es que cuando hago clic en el botón dice: GET http://127.0.0.1:5500/{input value in the text box} 404 (Not Found)
¿Alguien puede ayudarme a arreglar esto? Se supone que este método carga todas las claves presentes en el archivo json y las imprime.
palabras.json
{ "sports": ["golf", "hockey", "football"], "animals": ["giraffe", "snake", "lizard", "puma"], "video games": ["pacman", "asteroids", "super mario brothers", "donkey kong"] }Necesito imprimir las claves en orden alfabético en la página HTML.
Gracias.
Intente adjuntar el detector de eventos de clic al botón en la página del script.
document.getElementById('btnCat').addEventListener('click', ()=>{ const value = document.getElementById('txtCat').value; fetchData(value); });